<template>
  <view class="order-detail-page page">
    <!-- 顶部导航栏-开始 -->
    <view class="cu-bar fixed" :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }">
      <view class="action" @tap="back()">
        <text class="cuIcon-back"></text>
      </view>
      <view class="content" :style="[{ top: StatusBar + 'px' }]">{{i18n['订单详情']}}</view>
    </view>
    <!-- 顶部导航栏-结束 -->

    <!-- 订单状态-开始 -->
    <view class="status-box flex align-center justify-between">
      <view class="left text-white">
        <view class="status">{{ orderStatus | filterStatus }}</view>
        <view class="text-sm" v-if="orderStatus == 0">{{i18n['剩余时间']}}:{{ downTime.hours }}:{{ downTime.minutes }}:{{ downTime.seconds }}</view>
        <view class="text-desc">{{ orderStatus | filterStatusDesc }}</view>
      </view>
      <image class="icon" :src="orderStatus | statusIconFil" mode="aspectFit"></image>
    </view>
    <!-- 订单状态-结束 -->

    <!-- 收货地址-开始 -->
    <view class="address-box bg-white">
      <image class="avatar" :src="imgBaseUrl + 'integral/address.png'" mode="aspectFill"></image>
      <view class="flex1 ">
        <view class="left">
          <view class="flex align-center">
            <view class="tag" v-if="addrInfo && addrInfo.label_name">{{ addrInfo.label_name }}</view>
            <view class="name text-lg text-bold" v-if="addrInfo && addrInfo.receiver_name">{{ addrInfo.receiver_name}}</view>
            <text class="mobile text-lg text-bold" v-if="addrInfo && addrInfo.receiver_mobile">{{addrInfo && addrInfo.receiver_mobile }}</text>
          </view>
          <view class="content text-666 text-cut-2" v-if="addrInfo ">{{ addrInfo.province + " " + addrInfo.city + " " + addrInfo.district +" " +addrInfo.receiver_address }}</view>
        </view>
      </view>

    </view>

    <view  class="bottom_bg" >
      <image :src="imgBaseUrl + 'integral/bottom_line.png'"></image>
    </view>

    <!-- 收货地址-结束 -->
    <!-- 订单上部 end -->
    <view class="box">
      <!-- 主要订单信息  start-->
      <view class="" style="padding:0 24rpx;margin-bottom:24rpx">
        <view class=" bg-white radius-16" style="padding:32rpx 24rpx;">
          <!-- 商品信息 start -->
          <block v-for="(item, index) in goodsInfo" :key="index">
            <view>
              <view class="flex " @click="navToGoodsDetail(item)">
                <!-- <image class="img-168 radius" :src="item.goods_thumb" mode="aspectFill"></image> -->
                <view class="img-168 radius">
                  <fu-image :src="item.goods_thumb" mode="aspectFill" radius="16rpx"></fu-image>
                </view>
                <view class="goods-info margin-left-sm flex flex-direction">
                  <view>
                    <view class="text-df text-333 text-cut-2">{{item.goods_name}}</view>
                    <view class="flex justify-between sku_desc_content">
                      <view class="sku_desc">{{item.sku_name || ''}}</view>
                    </view>
                  </view>
                  <view class="order_money margin-top-xs flex justify-between">
                    <view class="flex align-center">
                      <text class="text-xl text-osd text-prices">{{ item.total_integral || 0}}</text>
                      <text class="  margin-left-xs  text-333 text-bold"> {{i18n['积分']}}</text>
					  <view class="" v-if="item.goods_money>0">
					  	<text  class=" text-bold text-333" style="padding:0 10rpx;">+</text>
					  	<text  class="text-prices text-xl">{{ item.shop_price }}</text>
						<text  class="text-333 text-bold">元</text>
					  </view>
                    </view>
                    <text class="margin-right-xs text-999 text-sm">x{{ item.num }}</text>
                  </view>
                </view>
              </view>
            </view>
          </block>
          <!-- 商品信息 end -->
          <view class="solid-top margin-top padding-top-xs">
            <view  class="flex justify-between align-center text-df padding-tb-sm" v-if="goods_money>0">
              <text class="text-999 list-desc"> {{i18n['商品总额']}}</text>
			  <view class="flex align-center">
			  <!-- 	<view class="flex align-center">
					<text class="text-lg text_desc_top text-blod text text-theme">{{ sales_integral || 0}}</text>
					<text class="text_desc  margin-left-xs  text-333 "> {{i18n['积分']}}</text>
			  	</view> -->
			  	<view >
			  		<!-- <text  class="text_desc" style="padding:0 10rpx;">+</text> -->
			  	  <text class="num_num ">¥ {{  goods_money || '0.00' }}</text>
			  	</view>
			  </view>
            </view>
            <view class="flex justify-between align-center text-df padding-tb-sm" >
              <text class="text-999 list-desc">{{i18n['会员积分(当前积分']}}：{{user_score}})</text>
              <view >
                <text class="num_num">-{{sales_integral}}</text>
              </view>
            </view>
            <view class="flex justify-between align-center text-df padding-tb-sm">
              <text class="text-999 list-desc"> {{i18n['运费']}}</text>
              <text v-if="express_price" class="num_num">¥ {{ express_price }}</text>
              <text v-else class="num_num">{{i18n['免邮']}}</text>
            </view>

            <view  class="flex justify-end align-center padding-top-sm  margin-top-xs solid-top">
              <text class="all_desc margin-right">
                {{orderStatus == 0 ? i18n['应付款'] : i18n['实付款']}}:</text>
              <text class="text-333 text-bold">
                <!--   <text class=" money_money">{{sales_integral}}</text>
                <text class="margin-left-xs">{{i18n['积分']}}</text> -->
                <!-- <text v-if="payable_money>0" style="padding:0 10rpx;">+</text> -->
                <text class="money_money"> <text :class="[ order_money >0?'text-price':'']" class=" font-24"></text>{{ order_money > 0 ?  order_money : sales_integral }}</text>
                <text  class="margin-left-xs" v-if="order_money<= 0">{{'积分'}}</text>
              </text>
            </view>
          </view>
        </view>
      </view>
      <!-- 主要订单信息  end-->
      <!-- 次要订单信息  start-->
      <view class="padding-lr-sm margin-bottom-sm">

       <view class=" bg-white radius-16 text-df text-333" style="padding:0 24rpx 16rpx;">
          <view class="list-item flex solid-bottom order_title " >
            <view class="order_title_left"></view>
            {{i18n['订单信息']}}
          </view>
          <view class="list-item flex align-center" v-if="marks">
            <view class="title">{{i18n['订单备注']}}:</view>
            <view class="text-sm" style="word-break: break-all">{{
                 marks
            }}</view>

          </view>
          <view class="list-item flex" style="position:relative;margin-top:8rpx;">
            <view class="title">{{i18n['订单编号']}}:</view>
            <view class="other_info">{{ order_sn }}</view>
            <view @click="hanldeCopy(order_sn)" class="copy" style="float: right;"> {{i18n['复制']}}</view>
          </view>
          <view class="list-item flex">
            <view class="title">{{i18n['兑换时间']}}:</view>
            <view class=" other_info">{{ createTime }}</view>
          </view>
          <view class="list-item flex" v-if="status>0">
            <view class="title">{{i18n['付款金额']}}:</view>
            <view class="other_info text-price">{{ is_pure_integral == 0 ?  order_money : '0.00' }}</view>
          </view>
		  <view class="list-item flex" v-if="status==0">
		    <view class="title">应付金额:</view>
		    <view class="other_info text-price">{{ order_money }}</view>
		  </view>
         <view class="list-item flex" v-if="payType">
            <view class="title">{{i18n['支付方式']}}:</view>
            <view class="other_info">{{ payType | filterPay }}</view>
          </view>
          <view class="list-item flex" v-if="payTime && orderStatus != 0 && orderStatus != -1">
            <view class="title">{{i18n['支付时间']}}:</view>
            <view class="other_info">{{ payTime }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 次要订单信息  end-->
    <!-- 底部按钮组 start-->
    <view class="goods-actions bg-white padding-lr-sm">



      <!-- v-if="orderStatus <= 4" -->
      <button class="cu-btn round margin-left-sm" :class="orderStatus == -1?'default_active':''" v-if="
          orderStatus == -1 ||
          orderStatus == 4 || orderStatus == 3 ||
          orderStatus == 7"
        @tap="delOrder">
        {{i18n['删除订单']}}
      </button>

      <button class="cu-btn round margin-left-sm" v-if="orderStatus == 0" @tap="cancelOrder">
        {{i18n['取消订单']}}
      </button>
      <button  v-if="orderStatus == 0" class="cu-btn round margin-left-sm" @click="toPay()" >
         {{i18n['去付款']}}
      </button>
      <button class="cu-btn round margin-left-sm" v-if="orderStatus == 1 && is_remind_info == 0  && (order_type != 7 || final_status ==1)"
        @tap="remindOrder">
        {{i18n['提醒发货']}}
      </button>
      <button class="cu-btn round margin-left-sm disabled" disabled v-if="orderStatus == 1 && is_remind_info == 1  && (order_type != 7 || final_status ==1)">
        {{i18n['已提醒']}}
      </button>
     <!-- <button class="cu-btn round margin-left-sm" v-if="orderStatus == 3" @tap="evaluateOrder()">
        去评价
      </button> -->
      <button class="cu-btn round margin-left-sm" v-if="orderStatus == 2 " @tap="seelogs">
        {{i18n['查看物流']}}
      </button>
      <button class="cu-btn round margin-left-sm" v-if="orderStatus == 2" @tap="receiveOrder">
        {{i18n['确认收货']}}
      </button>
    </view>
    <!-- 底部按钮组 end -->
    <!-- 网络监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络监测 end -->
  </view>
</template>
<script>
  let i18n = global.i18n;
  const statusObj = {
    "-1": i18n["订单已取消"],
    0: i18n["订单待付款"],
    1: i18n["订单待发货"],
    2: i18n["订单待收货"],
    3: i18n["订单已完成"],
    4: i18n["订单已评价"],
    5: i18n["售后处理中"],
    6: i18n["退款成功"],
  }; //声明常量 支付状态

  const statusDesc = {
    1: i18n["已付款，等待卖家发货"],
    2: i18n["卖家已发货等待买家收货"],
  }; //声明常量 支付状态
  export default {
    data() {
      return {
        downTime: {
          hours: 0,
          minutes: 0,
          seconds: 0,
        },
        timer: null, // 定时器
        StatusBar: this.StatusBar, //状态栏 高度
        CustomBar: this.CustomBar, // 标题栏高度
        order_sn: null, // 订单编号
        order_type: null, // 订单类型
        orderStatus: null, // 订单状态
        final_status: null, // 尾款支付状态
        createTime: "", // 下单时间
        addrInfo: null, // 下单地址
        goodsInfo: [], // 下单商品
        feightInfo: 0, // 运费
        goodsPrice: 0, // 商品金额
		goods_money:0, //商品总额
        payType: null, // 支付类型
        payTime: null, // 支付时间
        order_money: 0, //商品总额
        sales_integral: 0, //销售积分
        coupon_money: 0, // 优惠金额
        payable_money: 0, // 实付款
        express_price: 0, // 运费
        endtime: "", // 倒计时
        marks: "", //订单备注
        status: null, //订单状态
        is_remind_info: null, //提醒发货
        user_score: 0, //可用积分
        is_pure_integral:0,//是否为纯积分兑换  0 不是  1是
      };
    },

    /**
     * @description  接受参数 初始化
     * @param {Object} option order_sn:订单编号    status:支付状态   order_type：订单类型
     */
    onLoad(option) {
      const {
        order_sn,
        status,
        order_type,
      } = option;
      this.order_sn = order_sn;
      this.order_type = order_type;
      this.status = status;
      uni.$on("updateOrderDetail", (data) => {
        this.getDetail();
      });
      // this.user_score = global.userInfo.score

    },
    onShow() {
      this.getDetail();
      this.getIntegralInfo()
    },
    filters: {
      //过滤订单状态  显示文本
      filterStatus(val) {
        val = val + "";
        if (!val) return "";
        return statusObj[val + ""];
      },

      //过滤订单状  显示描述语
      filterStatusDesc(val) {

        val = val + "";
        if (!val) return "";
        return statusDesc[val + ""];
      },


      //过滤支付状态  显示文本
      filterPay(val) {
        const datas = {
          balance: global.i18n["余额支付"],
          wxpay: global.i18n["微信支付"],
          alipay: global.i18n["支付宝支付"],
          minipay: global.i18n["小程序支付"],
          minipay_mix: global.i18n["小程序支付"],
          integral: "积分抵扣",
        };
        return datas[val];
      },
      //显示手机 隐藏中间部分
      filterMobile(val) {
        if (!val) return "";
        return val.substr(0, 3) + "****" + val.substr(-4);
      },
      // 过滤订单状态图标
      statusIconFil(val) {
        let data = {
          "status_-1": "",
          status_0: "",
          status_1: "",
          status_2: "",
          status_3: "",
          status_4: "",
        };
        return data["status_" + val] || "";
      },
    },
    onUnload() {
      uni.$off("updateOrderDetail");
    },
    onPullDownRefresh() {
      this.getDetail();
    },
    methods: {
      /**
       * @description 获取积分统计
       */
      getIntegralInfo() {
        this.$api
          .get(global.apiUrls.getMyMoney)
          .then((res) => {
            console.log("金额信息: ", res);
            if (res.data.code == 1) {
              this.user_score = res.data.data.score;
              this.loadData();
            } else {
              this.$message.info(res.data.msg);
            }
          })
          .catch((err) => {
            console.log("err: " + JSON.stringify(err));
          });
      },
      /**
       * @description  获取订单详情
       */
      getDetail() {
        const data = {
          order_sn: this.order_sn,
          order_type: this.order_type,
          is_son: 1,
        };
        this.$api
          .post(global.apiUrls.getIntrgralOrderDetail, data)
          .then((res) => {
            this.is_remind_info = res.data.data.is_remind.info;
            console.log("订单详情: ", res);
            if (res.data.code == 1) {
              const data = res.data.data;
              this.goodsInfo = data.goods_integral;
              this.orderStatus = data.status; // 订单状态
              this.order_sn = data.order_sn;
              this.createTime = data.create_time;
              this.payType = data.pay_type;
              this.order_money = data.order_money;
              this.sales_integral = data.integral_reduce;
              this.payable_money = data.payable_money;
			  this.goods_money = data.goods_money;
              // this.is_pure_integral = data.order_goods_list[0] ? data.order_goods_list[0].is_pure_integral : 1;
              this.express_price = data.order_address && data.order_address.express_price;
              this.marks = data.order_address && data.order_address.remark;
              if (data.order_address && data.order_address.address_id) {
                this.addrInfo = data.order_address
              }
			  if(data.pay_time!=0){
				  this.payTime = data.pay_time;
			  }
              if (data.cancel_time) {
                this.initDownTime(data.cancel_time);
              }
              uni.stopPullDownRefresh();
            }
          })
          .catch((err) => {
            console.log("err: " + JSON.stringify(err));
          });
      },
      // 开启倒计时
      initDownTime(time) {
        if (this.timer) {
          clearInterval(this.timer);
        }
        let endTime = time * 1000;
        let nowTime = new Date().getTime();
        let timeleft = endTime - nowTime;
        if (timeleft > 0) {
          var hours = parseInt((timeleft / (1000 * 60 * 60)) % 24);
          var minutes = parseInt((timeleft / (1000 * 60)) % 60);
          var seconds = parseInt((timeleft / 1000) % 60);
          this.downTime.hours = hours < 10 ? "0" + hours : hours;
          this.downTime.minutes = minutes < 10 ? "0" + minutes : minutes;
          this.downTime.seconds = seconds < 10 ? "0" + seconds : seconds;
          this.timer = setInterval(() => {
            nowTime = new Date().getTime();
            timeleft = endTime - nowTime;
            if (timeleft > 0) {
              var hours = parseInt((timeleft / (1000 * 60 * 60)) % 24);
              var minutes = parseInt((timeleft / (1000 * 60)) % 60);
              var seconds = parseInt((timeleft / 1000) % 60);
              this.downTime.hours = hours < 10 ? "0" + hours : hours;
              this.downTime.minutes = minutes < 10 ? "0" + minutes : minutes;
              this.downTime.seconds = seconds < 10 ? "0" + seconds : seconds;
            } else {
              clearInterval(this.timer);
              console.log(11111, "清除倒计时");
              this.selfCancelOrder();
              this.getDetail();
              this.timer = null;
            }
          }, 1000);
        }
        // 判断用户时间到 且未支付,主动帮他取消订单
        if (timeleft <= 0 && this.model.status == 0) {
          this.selfCancelOrder();
        }
      },

      // 倒计时结束取消自动取消订单
      selfCancelOrder() {
        this.$api
          .post(global.apiUrls.postCancelOrder, {
            order_sn: this.order_sn,
          })
          .then((res) => {
            console.log("取消订单操作", res);
            if (res.data.code == 1) {
              this.getDetail();
              // 更新列表页数据
              uni.$emit("onPageUpdata", {
                type: 1,
                data: {
                  itemIndex: this.itemIndex
                },
                msg: this.i18n["取消订单"],
              });
            }
          });
      },
      /**
       * @description 查看售后
       * @param {Object} id ：订单id
       */
      toAfterDetail(id) {
        console.warn('xxxxx', id)
        this.$urouter.navigateTo({
          url: "/pages/order/afterorder/afterorder-detail/index",
          params: {
            id: id,
          },
        });
      },
      /**
       * @description 取消订单
       */
      cancelOrder() {
        this.$util.showModal({
          title: this.i18n["提示"],
          content: this.i18n["确定要取消订单吗?"],
          success: (res) => {
            if (res.confirm) {
              this.$api
                .post(global.apiUrls.postCancelOrder, {
                  order_sn: this.order_sn,
                })
                .then((res) => {
                  console.log("取消订单操作", res);
                  if (res.data.code == 1) {
                    this.$message.info(this.i18n["提交成功,正在为您取消订单"]);
                    setTimeout(() => {
                      this.getDetail();
                    }, 800);
                  }
                });
            }
          },
        });
      },

      /**
       * @description 去支付
       * @param {string} sn = 订单号
       * @param {Number} type = 订单类型
       * */
      toPay(sn, type) {
      	this.$urouter.navigateTo({
      		url: '/pages/integral/integral-order-process/pay-order/index',
      		params: {
      			order_sn: this.order_sn,
      			order_type: 12
      		}
      	});
      },

      /**
       * @description  删除订单
       */
      delOrder() {
        this.$util.showModal({
          title: this.i18n["确认删除此订单?"],
          content: this.i18n["删除后不可恢复"],
          success: (res) => {
            if (res.confirm) {
              this.$api
                .post(global.apiUrls.postDelOrder, {
                  order_sn: this.order_sn,
                })
                .then((res) => {
                  console.log("res: " + JSON.stringify(res));
                  if (res.data.code == 1) {
                    this.$message.info(this.i18n["删除成功"]);
                    uni.$emit("refreshOrder");
                    setTimeout(function() {
                      // uni.navigateBack();
                      uni.redirectTo({
                        url: '/pages/integral/myintegral/integral-exchange-record/index'
                      });
                    }, 800);
                  }
                });
            }
          },
        });
      },

      /**
       * @description  联系客服
       * @param {Object} item 订单详情
       */
      toCustomer(item) {
        let data = {
          order_sn: this.order_sn,
          orderStatus: statusObj[this.orderStatus],
          createTime: this.createTime,
          goods_thumb: item.goods_thumb,
          goods_name: item.goods_name,
          goods_price: item.goods_money,
          goods_id: item.goods_id,
          user_name: this.addrInfo.receiver_name,
          user_phone: this.addrInfo.receiver_mobile,
          user_address: this.addrInfo.receiver_address,
        };
        try {
          uni.setStorageSync("CustomerCacheData", data);
        } catch (err) {
          console.log(err);
        }

        this.$urouter.navigateTo({
          url: "/pages/service-message/service/service-detail/index",
          params: {
            kid: 1,
            goods_id: item.goods_id,
            activity_id: item.activity_id || 0
          },
        });
      },
      /**
       * @description 提醒发货
       * @param {Object} sn 订单编号
       */
      remindOrder(sn) {
        this.$api
          .post(global.apiUrls.postRemindShipment, {
            order_sn: this.order_sn,
          })
          .then((res) => {
            if (res.data.code == 1) {
              this.$message.info(this.i18n["已提醒,请耐心等待"]);
              this.is_remind_info = 1
            }
          });
      },
      /**
       * @description 确认收货
       */
      receiveOrder() {
        this.$util.showModal({
          title: this.i18n["提示"],
          content: this.i18n["您是否确认收到货物?"],
          success: (res) => {
            if (res.confirm) {
              this.$api
                .post(global.apiUrls.postIntegralConfirmOrder, {
                  order_sn: this.order_sn,
                })
                .then((res) => {
                  console.log("res: " + JSON.stringify(res));
                  if (res.data.code == 1) {
                    this.getDetail();
                    uni.$emit("refreshOrder");
                  }
                });
            }
          },
        });
      },
      /**
       * @description 查看物流
       */
      seelogs() {
        this.$urouter.navigateTo({
          url: "/pages/order/orderdetail/express-delivery/index",
          params: {
            order_sn: this.order_sn,
          },
        });
      },
      /**
       * @description 订单评价
       */
      evaluateOrder() {
        uni.setStorageSync('order_goods_list', JSON.stringify(this.goodsInfo));
        this.$urouter.navigateTo({
          url: "/pages/order/evaluation/order-evaluation/index",
          params: {
            order_sn: this.order_sn,
            order_type: this.order_type
          },
        });
      },
      /**
       * @description 申请售后
       * @param {Object} item 订单信息
       */
      afterSaleOrder(item) {
        if (this.orderStatus == 0 || this.orderStatus == -1) {
          uni.showToast({
            title: this.i18n['确认收货后才能申请售后'],
            duration: 2000,
            icon: 'none'
          });
        } else {
          item.order_sn = this.order_sn;
          item.status = this.status;
          this.$urouter.navigateTo({
            url: "/pages/order/afterorder/afterorder-apply/index",
            params: {
              order_sn: item.order_sn,
              goods_id: item.goods_id,
              sku_id: item.sku_id,
              status: item.status
            },
          });
        }
      },
      /**
       * @description  返回
       */
      back() {
        uni.navigateBack({
          delta: 1,
        });
      },
      /**
       * @description 去商品详情
       * @param {Object} item 订单详情
       */
      navToGoodsDetail(item) {
        uni.navigateTo({
          url: `/pages/integral/integralgoods/integral-goods-detail/index?goods_id=${item.goods_id}&sku_id=${item.sku_id}&activity_id=${item.activity_id}`,
        });
      },
      /**
       * @description  复制单号
       * @param {Object} value 单号
       */

      hanldeCopy(value) {
        uni.setClipboardData({
          data: value,
          success: () => {
            this.$message.info(this.i18n['复制成功']);
          }
        });
      },
    },

  };
</script>

<style lang="scss" scoped>
  page {
    background-color: #f8f8f8;
  }

  .order-detail-page {
    background-image: url($IMG_BASE_URL + 'order/bg-1.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    min-height: calc(100vh - 88rpx);
    font-family: PingFang SC;
    padding-top: calc(88rpx + var(--status-bar-height));
    padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom));

    .text-red {
      color: $theme;
    }

    .text-blue {
      color: #2f98fe;
    }
    // 顶部导航栏-开始
    .cu-bar {
      background-image: url($IMG_BASE_URL + 'order/bg-1.png');
      background-size: 100% auto;
      color: white;
      box-shadow: none;
    }
    // 顶部导航栏-结束
    .bottom_bg{
        margin:0 24rpx;
        width: 100%;
        padding: 0 24rpx;
        margin:0 auto;
        height: 70rpx;
        position: relative;
         image{
           position: relative;
           top:-25rpx;
           height: 6rpx;
           width: 100%;
         }

    }



    // 收货地址-开始
    .address-box {
      margin: 0 24rpx;
      // margin-bottom: 20rpx;
      padding: 40rpx 24rpx 40rpx 94rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      position: relative;
      .avatar {
        position: absolute;
        top: 60rpx;
        left: 24rpx;
        border-radius: 50%;
        width: 60rpx;
        height: 60rpx;
      }

      &>.flex1 {
        // height: 174rpx;
        // padding: 24rpx 0;
        
        .left {
          
          .tag {
            min-width: 56rpx;
            height: 32rpx;
            line-height: 30rpx;
            text-align: center;
            margin-right: 16rpx;
            border-radius: 8rpx;
            padding: 0 15rpx;
            color: #6a8bff;
            background-color: rgba($color: #6a8bff, $alpha: 0.1);
            border: 1px solid #6a8bff;
            font-size: 24rpx;
          }

          .mobile {
            font-family: Lato;
            margin-left: 16rpx;
          }

          .content {
            margin-top: 16rpx;
            font-size: 28rpx;
            line-height: 40rpx;
            font-weight: 400;
            color: #666666;
            
          }
        }
      }
    }

    // 收货地址-结束
  }

  .page {
    min-height: 100vh;
    background-color: #f8f8f8;
    padding-bottom: 100rpx;
    padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

    // 订单上部 start
    .header {
      height: 330rpx;
      background: $bgtheme;
      color: #ffffff;

      .bg {
        background: $bgtheme;
      }
    }
    // 订单上部 end
  }

  // 订单状态-开始
  .status-box {
    margin: 0 24rpx;
    margin-bottom: 5rpx;

    .status {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 8rpx;
      color: #FFFFFF;
    }
    .text-desc{
      height: 33rpx;
      line-height: 33rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #FFFFFF;
    }

    .icon {
      width: 140rpx;
      height: 140rpx;
      margin-right: 14rpx;
    }
  }

  // 订单状态-结束

  //订单主要信息 start
  .order_title{
   font-size: 32rpx;
   font-weight: 500;
   color: #333333;
   padding: 32rpx 0 24rpx;

   .order_title_left{
     position: relative;
     top:0rpx;
     width: 6rpx;
     height: 30rpx;
     margin-right: 22rpx;
     background: linear-gradient(180deg, #FA2033 0%, #FF6530 100%);
     opacity: 1;
     border-radius: 4rpx;

   }

  }
  .box {
    width: 100%;
    transform: translateY(-45rpx);



    .list-item {
      align-items: center;
      .title {
        min-width: calc(4em + 15px);
        font-size: 28rpx;
      }
    }

    .list-item+.list-item {
      // margin-top: 20rpx;
      height:72rpx;
    }
  }

  //订单主要信息 end
  .disabled {
    background: #aaaaaa !important;
  }

  // 商品信息 start
  .title {
    // width: 120rpx;
    width: 140rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 40rpx;
    color: #999999;
  }

  .other_info {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 40rpx;
    color: #333333;
  }

  .goods-info {
    flex: 1;
    // height:125rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    overflow: hidden;

    &>view {
      width: 100%;
    }
  }

  // 商品信息 end
  // 底部按钮组 start
  .goods-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 112rpx;
    height: calc(112rpx + constant(safe-area-inset-bottom));
    height: calc(112rpx + env(safe-area-inset-bottom));
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .cu-btn {
      font-size: 28rpx;
      font-weight: 500;
       color: #333333;

      // border: 1rpx solid #333;
      // background-color: #ffffff;
      margin-right: 30rpx;


      background: #F6F6F6;
      width: 200rpx;
      height: 64rpx;
      border-radius: 39rpx;
      &.default_active{
        background: #F6F6F6!important;
        color: #333!important;
      }
    }

    .cu-btn:last-child {
      border: none;
      background: $bgtheme;
      color: #ffffff;

      width: 200rpx;
      height: 64rpx;
      background: $theme;
      border-radius: 39rpx;
    }
  }

  // 底部按钮组 end
  //商品图片 start
  .img-168 {
    width: 200rpx;
    height: 200rpx;
    background-color: #eeeeee;
    border-radius: 16rpx;
  }

  .sku_desc_content {
    position: relative;
    margin-top:8rpx;
  }

  //商品图片 end
  .sku_desc {
    height: 33rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 33rpx;
    color: #999999;
    opacity: 1;
  }

  .order_money {
    color: #FA2033;
    line-height: 36rpx;
  }

  .list-desc {
    line-height: 30rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 42rpx;
    color: #333333;
  }

  .num_num {

    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 42rpx;
    color: #333333;
  }

  .all_desc {

    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 42rpx;
    color: #999999;
    opacity: 1;

  }

  .money_money {

    height: 53rpx;
    font-size: 36rpx;
    font-family: Oswald;
    font-weight: 500;
    line-height: 36rpx;
    color:#EF3A3A;


  }

  .copy {
    position: absolute;
    right: 0;
    height: 33rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 33rpx;
    color: #496A9D;

  }

  .text_desc {

    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .text_desc_top {
    font-size: 36rpx;
    font-family: Oswald;
    color: #FA2033;
  }
  .radius-16{
    border-radius:16rpx;
  }
</style>
